import React, { Component } from 'react';
import * as events from './events';
import {
  Button,
  Input,
  Popconfirm,
  List,
} from 'antd';
import './main.css';

export default class extends Component {

  // 只读
  state = {
    inputValue: '',
    list: [], // 原数组
    showingList: [], // 正在展示的数组
    editingId: -1,
  };

  idCount = 0;
  editValue = '';

  render () {
    return (
      <>
        <Input
          className="inp"
          onChange={ events.onChange.bind(this) }
          value={ this.state.inputValue }
        />
        <Button onClick={ events.onCreate.bind(this) }>新增</Button>
        <Button onClick={ events.onSearch.bind(this) }>查询</Button>
        
        <List
          itemLayout="horizontal"
          dataSource={ this.state.showingList }
          renderItem={item => (
            <List.Item 
              className="list-item"
              actions={[ 
                this.state.editingId === item.id
                ? <Button onClick={ events.onEditOk.bind(this, item.id) }>确认</Button>
                : <Button onClick={ events.onEdit.bind(this, item.id, item.value) }>修改</Button>,
                <Popconfirm
                  title="确认删除？"
                  onConfirm={ events.onDelete.bind(this, item.id) }
                  okText="确认"
                  cancelText="取消"
                >
                  <Button danger>删除</Button>
                </Popconfirm>
              ]}
            >
              {
                this.state.editingId === item.id
                ? <Input
                    className="inp"
                    defaultValue={ item.value } 
                    onChange={ events.onEditChange.bind(this) }
                  />
                : <>{ item.value }</>
              }
            </List.Item>
          )}
        />
      </>
    );
  }

}
